<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>自定义指令</title>
</head>

<body>
  <div id="app">
 <div v-li.aa="num">{{ title }}</div>
 <div v-yu="'blue'">{{ message }}</div>
 <div v-yu>{{ message }}</div>

  </div>

  <script src="/vue.js"></script>
  <script>
  Vue.directive('li',{
    bind(el){
    el.style.color="red"
    } 
  })
  Vue.directive('yu',{
    bind(el,bindings){
    el.style.color=bindings.value ||"red"
    } 
  })


    const app = new Vue({
      el:"#app",
      data:{
        title:"aa",
        num:10,
        message:"bb"
      }
    })
  </script>
</body>

</html>